<template>
  <div class="container state">
    <!--<div class="container-title">状态</div>-->
    <div>
      <ul>
        <li class="li_state">
          <span class="li_state_title">ES连接状态</span>
          <span class="weizhi" v-if="ESwarehouse == 1"><i class="el-icon-circle-check chenggong"></i></span>
          <span class="weizhi" v-else-if="ESwarehouse == 2"><i class="el-icon-circle-close shibai"></i></span>
          <span class="weizhi" v-else><i class="el-icon-loading zhengchang"></i></span>
        </li>
        <li class="li_state">
          <span class="li_state_title">A库连接状态</span>
          <span class="weizhi" v-if="Awarehouse == 1"><i class="el-icon-circle-check chenggong"></i></span>
          <span class="weizhi" v-else-if="Awarehouse == 2"><i class="el-icon-circle-close shibai"></i></span>
          <span class="weizhi" v-else><i class="el-icon-loading zhengchang"></i></span>
        </li>
        <li class="li_state">
          <span class="li_state_title">B库连接状态</span>
          <span class="weizhi" v-if="Bwarehouse == 1"><i class="el-icon-circle-check chenggong"></i></span>
          <span class="weizhi" v-else-if="Bwarehouse == 2"><i class="el-icon-circle-close shibai"></i></span>
          <span class="weizhi" v-else><i class="el-icon-loading zhengchang"></i></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        /*状态*/
        ESwarehouse: 0,
        Awarehouse: 0,
        Bwarehouse: 0,
      }
    },
    created() {
      this.connect_state(this.$com.UrlYogether + '/connection/tset/es', this.$com.UrlYogether + '/connection/tset/Master', this.$com.UrlYogether + '/connection/tset/Cluster')
    },
    methods: {
      /*连接状态*/
      connect_state(ES, Awarehouse, Bwarehouse) {
        this.$axios({
          method: 'GET',
          url: ES,
        }).then((res) => {
          if (res.status == 200) {
            if (res.data == true) {
              this.ESwarehouse = 1
            } else {
              this.ESwarehouse = 2
            }
          }
        });
        this.$axios({
          method: 'GET',
          url: Awarehouse,
        }).then((res) => {
          if (res.status == 200) {
            if (res.data == true) {
              this.Awarehouse = 1
            } else {
              this.Awarehouse = 2
            }
          }
        });
        this.$axios({
          method: 'GET',
          url: Bwarehouse,
        }).then((res) => {
          if (res.status == 200) {
            if (res.data == true) {
              this.Bwarehouse = 1
            } else {
              this.Bwarehouse = 2
            }
          }
        })
      },
    }
  }
</script>

<style scoped>
  ul {
    margin: 0;
    margin-left: -35px;
  }

  li {
    list-style: none;
  }

  .chenggong {
    color: #00a854;
  }

  .shibai {
    color: red;
  }

  .zhengchang {
    color: blue;
  }

  .container {
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 15px;
    height: 110px;
  }

  .container .container-title {
    margin-bottom: 6px;
  }

  .container .li_state {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    margin: 4px 0;
    display: block;
    background: #F5F5F6;
  }

  .container .li_state:hover {
    background: #fff;;
    border: 1px solid #00C1DE;
  }

  .container .li_state .li_state_title {
    width: 50%;
    padding-left: 30px;
    color: #333;
    display: inline-block;
    vertical-align: top;
  }

  .container .weizhi {
    float: right;
    margin-right: 20px;
  }
</style>
